<template>
    <div>
        <comp ref="line" :params="params" height="300px" width="100%" />
    </div>
</template>
<script>
import comp from "./../line/index";
export default {
    name: "test",
    title: "面积阴影折线",
    components: { comp },
    theme: "black",
    data() {
        return {
            params: {},
            dataCols: {
                dimension: ["日期"],
                legend: {
                    data: ["类型1",'类型3'],
                },
                series: [
                    {
                        日期: "1月",
                        类型1: 4,
                        类型3:2.5
                    },
                    {
                        日期: "2月",
                        类型1: 4.2,
                        类型3:3.5
                    },
                    {
                        日期: "3月",
                        类型1: 5,
                        类型3:1.5
                    },
                    {
                        日期: "4月",
                        类型1: 3.5,
                        类型3:4.5
                    },
                    {
                        日期: "5月",
                        类型1: 4.8,
                        类型3:5.5
                    },
                    {
                        日期: "6月",
                        类型1: 5,
                        类型3:2.5
                    },
                    {
                        日期: "7月",
                        类型1: 3,
                        类型3:5.3
                    },
                    {
                        日期: "8月",
                        类型1: 2,
                        类型3:5.1
                    },
                    {
                        日期: "9月",
                        类型1: 14.5,
                        类型3:6.5
                    },
                    {
                        日期: "10月",
                        类型1: 3.9,
                        类型3:5.3
                    },
                    {
                        日期: "11月",
                        类型1: 4.8,
                        类型3:5.7
                    },
                    {
                        日期: "12月",
                        类型1: 4.6,
                        类型3:5.9
                    },
                ],
            },
            setting: {
                theme: "white",
                legend: {
                    
                },
                grid: {},
                xAxis: {
                    boundaryGap: false,
                },
                yAxis: {
                    axisLine: {
                        show: true,
                    },
                },
                color: [],
                series: {
                    lineStyle: {
                        width: 2,
                    },
                    showAreaBackground: true, //此处和areaStyle互补，如果为true则使用默认，如果areaStyle有值，则覆盖
                    // areaStyle: {
                    //     normal: {
                    //         opacity: 0.1,
                    //     },
                    // },
                },
            },
        };
    },
    mounted() {
        this.$nextTick(() => {
            let param = {
                dataCols: this.dataCols,
                setting: this.setting,
            };
            this.params = { ...param };
        });
    },
};
</script>